<template>
  <div>
    <el-dialog :visible.sync="dialogShow" width="1120px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div slot="title">
        <div class="flex bg-white align-center">
          <div class="title-box flex align-center">
            <span class="font-size-28 color-333333 padding-right-20">{{ model.name }}</span>
            <span v-if="model.isMainStore" class="font-size-14 padding-left-right-5 color-333333">商铺</span>
            <img v-if="model.isMainStore" :src="mainShop" class="main-shop-img margin-right-20" />
          </div>
          <div class="flex align-center">
            <img v-if="model.industryUrl && !isVacancy" :src="model.industryUrl" class="title-img margin-right-5" />
            <div v-if="model.leaserShopName && !isVacancy" class="font-size-16">{{ model.leaserShopName + '（' + model.projectName + '）' }}</div>

            <div v-if="isVacancy" class="status-box font-size-14 margin-left-20 padding-left-right-10" :style="`background:${statusColor[assetObj.assetState]}`">{{ typeList[assetObj.assetState] }}</div>
            <!-- 空置 -->
            <div class="margin-left-20" v-if="assetObj.assetState == 'empty'">
              <span v-if="!model.contractKey" class="color-666666">无租赁记录</span>
              <span v-if="assetObj.date" class="color-666666">{{ assetObj.date | formatDate }}起空置</span>
            </div>

            <!-- 已签约 -->
            <div class="margin-left-20" v-if="assetObj.assetState == 'signed'">
              <span v-if="assetObj.date" class="color-666666">{{ assetObj.date | formatDate }}<i>到期</i></span>
              <span v-if="assetObj.days && enterType != 'plan'" class="color-333333">(<i class="color-red">剩余{{ assetObj.days }}天</i>)到期</span>
              <span v-if="!assetObj.date && !assetObj.days" class="color-666666">履约中</span>
            </div>

            <!-- 已签约待入驻 -->
            <div class="margin-left-20" v-if="assetObj.assetState == 'toBeSettled'">
              <span v-if="assetObj.date" class="color-666666">{{ assetObj.date | formatDate }}开始入驻</span>
            </div>
          </div>
          <el-button v-if="model.contractKey && !isVacancy" type="primary" size="mini" class="margin-left-20 self-mini-btn" @click="goContractInfo">当前合同</el-button>
<!--          <el-button v-if="assetObj.expireDays > 0 && assetObj.expireDays < 180 && systemType == 'operationManagement' && !isVacancy" type="primary" size="mini" class="margin-left-20 self-mini-btn" @click="extensionFn">立即续约</el-button>-->
          <div class="color-red flex-1 t-right padding-right-50" v-if="amountOwed && !isVacancy && enterType != 'plan'">欠费：{{ amountOwed | moneyFilterNoUnit }}元</div>
        </div>
      </div>
      <div class="flex">
        <div class="btn-box">
          <div v-for="item in tabList" class="tab-btn margin-bottom-20" @click="tabChange(item)" :key="item.type" :class="item.type == activeTab ? 'active-tab' : ''">{{ item.name }}</div>
<!--          <el-button v-if="showBtn && systemType == 'operationManagement'" type="primary" size="mini" class="margin-bottom-20" @click="goInfo('sign')">签约</el-button>-->
<!--          <el-button v-if="showBtn && systemType == 'operationManagement' && !isVacancy" type="primary" size="mini" class="margin-bottom-20" @click="addBill">新增账单</el-button>-->
          <!-- <el-button v-if="model.isRent && showBtn" type="primary" size="mini" class="margin-bottom-20" @click="goInfo('bill')">出账</el-button> -->
          <!-- <el-button v-if="model.isRent && showBtn" type="primary" size="mini" @click="goInfo('repaying')">退租</el-button> -->
        </div>
        <div class="flex-1 padding-left-right-20">
          <div class="content-box">
            <room-dialog-asset v-if="activeTab == 'asset'" ref="asset" :model="model" :assetObj="assetObj" class="margin-top-10"></room-dialog-asset>
            <room-dialog-bill v-if="activeTab == 'bill'" ref="bill" :model="model"></room-dialog-bill>
            <room-dialog-client v-if="activeTab == 'client'" ref="client" :model="model"></room-dialog-client>
            <room-dialog-history v-if="activeTab == 'history'" ref="history" :model="model"></room-dialog-history>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { requestTips, askDialog } from '@js/utils';
  import { formValid } from '@/lib/utils';
  import roomDialogAsset from './roomDialogAsset.vue';
  import roomDialogBill from './roomDialogBill.vue';
  import roomDialogClient from './roomDialogClient.vue';
  import roomDialogHistory from './roomDialogHistory.vue';
  import { apiAssetInfo, apiContractBillList } from '@a/about';

  export default {
    props: {
      model: {
        type: Object,
        default: null,
      },
      showBtn: {
        type: Boolean,
        default: true,
      },
      //plan 是计划
      enterType: {
        type: String,
        default: "",
      }
    },

    data() {
      return {
        activeTab: 'asset',
        dialogShow: false,
        tabList: [
          { type: 'asset', name: '资产信息' },
          { type: 'bill', name: '账单信息' },
          { type: 'client', name: '客户信息' },
          { type: 'history', name: '全部合同' },
        ],
        mainShop: require('../../imgs/mainShop.png'),
        typeList: {
          empty: '空置',
          notOperation: '未经营',
          toBeSettled: '已签待入驻',
          signed: '已签约',
        },
        statusColor: {
          empty: '#D6D6D4',
          toBeSettled: '#E27A78',
          signed: '#C2B0A2',
        },
        assetObj: {},
        systemType: localStorage.getItem('systemType'),
        amountOwed: 0, //欠费金额
      };
    },

    computed: {
      isVacancy () {
        return ['empty','notOperation'].indexOf(this.assetObj.assetState) > -1 ? true : false;
      }
    },

    mounted() {},

    methods: {
      //tab切换
      tabChange(item) {
        this.activeTab = item.type;
      },

      //签约 出账 退租
      goInfo(type) {
        let url = '';
        if (type == 'repaying') {
          url = '/businessAssets/ContractManage/drafting?isInfo=true&contractKey=' + this.model.contractKey + '&contractType=' + this.model.contractType + '&abolish=' + 'abolish';
        } else if (type == 'sign') {
          url = '/businessAssets/ContractManage/create?contractType=ZL&contractCategory=1';
        } else if (type == 'bill') {
          url = '/businessAssets/ContractManage/bill?isRefresh=true&isInfo=true&parentMenuId=a0a8ab12f6f945d8b1f77a30b83d21ea&menuId=436cf2d610a7479dae6a8a66a2345678&contractKey=' + this.model.contractKey + '&contractCode=' + this.model.contractCode + '&contractType=' + this.model.contractType + '&likeDescription=1b&timestamp=1650942471188';
        }
        window.open(url);
      },

      async getAssetInfo() {
        this.getDataSource()
        let res = await apiAssetInfo({
          assetCode: this.model.code,
          contractKey: this.model.contractKey,
          contractCode: this.model.contractCode,
          year: this.$route.query.year,
          month: this.$route.query.month,
          type: this.model.type,
        });
        this.assetObj = res;
      },

      //续约
      extensionFn() {
        let path = '/businessAssets/ContractManage/create?contractCategory=1&contractType=' + this.model.contractType;
        window.open(path);
      },

      //合同详情
      goContractInfo() {
        let param = {
          contractType: this.model.contractType,
          contractCode: this.model.contractCode,
          contractKey: this.model.contractKey,
          contractCategory: this.model.contractCategory,
          headerName: '合同管理',
        };

        let pathName = '/businessAssets/ContractManage/info?';
        for (let i in param) {
          pathName += i + '=' + param[i] + '&';
        }
        window.open(pathName);
      },

      //新增账单
      addBill() {
        window.open('/finance/more/projectFinace?ifInMore=4&menuId=581238827437576192');
      },

      //计算欠费金额
      async getDataSource(type) {
        if (!this.model.contractCode) {
          return
        }

        let amountOwed = 0;

        let res = await apiContractBillList({
          contractCode: this.model.contractCode,
          chargeItemCode: this.model.code,
          status: 1,
        });

        res.rows.forEach(project => {
          if (project.child && project.child.length > 0) {
            project.child.forEach(item => {
              if (item.bizTypeName != '合计') {
                amountOwed += Number(item.amountOwed) || 0;
              }
            });
          }
        });

        this.amountOwed = amountOwed;
      },
    },

    components: { roomDialogAsset, roomDialogBill, roomDialogClient, roomDialogHistory },
  };
</script>
<style lang="scss" scoped>
  .btn-box {
    width: 106px;
  }
  .tab-btn {
    text-align: center;
    height: 38px;
    line-height: 38px;
    border-radius: 3px;
    cursor: pointer;
  }
  .active-tab {
    background: rgba($color: #3384fe, $alpha: 0.05);
    color: #3384fe;
  }
  .title-img {
    width: 22px;
    height: 22px;
  }
  .title-box {
    .main-shop-img {
      width: 16px;
      height: 16px;
    }
  }
  .status-box {
    height: 27px;
    line-height: 27px;
    background: #f1f1f1;
    text-align: center;
    border-radius: 3px;
  }
  ::v-deep .el-button--primary {
    height: 38px;
    line-height: 38px;
    padding: 0;
    width: 106px;
    border-radius: 3px;
    margin-left: 0;
    background: #3384fe;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 24px;
  }
  .content-box {
    overflow-y: auto;
  }
  .content-box::-webkit-scrollbar {
    display: none;
  }
  ::v-deep .el-dialog .el-dialog__header {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
  }
  ::v-deep .el-dialog .el-dialog__header .el-dialog__close {
    color: #333;
  }
  .self-mini-btn {
    height: 29px;
    line-height: 24px;
    padding: 0 10px;
    span {
      font-size: 14px;
    }
  }
</style>
